<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易图片生成器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="flex items-center justify-center p-4">
    <div class="max-w-2xl w-full">
        <div class="glass-card rounded-2xl p-8 shadow-2xl">
            <h1 class="text-3xl font-bold text-white text-center mb-6">
                <i class="fas fa-magic mr-2"></i>
                简易图片生成器
            </h1>
            
            <div class="mb-6">
                <label class="block text-white text-sm font-bold mb-2">
                    输入图片描述
                </label>
                <textarea 
                    id="promptInput" 
                    class="w-full px-4 py-3 rounded-lg bg-white/20 text-white placeholder-gray-300 border-0 focus:ring-2 focus:ring-white/50"
                    rows="3"
                    placeholder="例如：夕阳下的海边小屋，温馨的小木屋，金色的阳光洒在沙滩上..."
                ></textarea>
            </div>
            
            <button 
                id="generateBtn"
                class="w-full bg-white/20 hover:bg-white/30 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"
            >
                <i class="fas fa-wand-magic-sparkles mr-2"></i>
                生成图片
            </button>
            
            <div id="loading" class="hidden mt-4 text-center">
                <div class="loading-spinner mx-auto mb-2"></div>
                <p class="text-white">正在生成图片...</p>
            </div>
            
            <div id="result" class="hidden mt-6">
                <h3 class="text-white text-lg font-bold mb-4 text-center">生成的图片</h3>
                <div class="bg-white/10 rounded-lg p-4">
                    <img id="generatedImage" class="w-full rounded-lg mb-4" alt="生成的图片">
                    <button 
                        id="downloadBtn"
                        class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center"
                    >
                        <i class="fas fa-download mr-2"></i>
                        下载图片
                    </button>
                </div>
            </div>
            
            <div id="error" class="hidden mt-4">
                <div class="bg-red-500/20 border border-red-500/50 text-red-200 px-4 py-3 rounded-lg">
                    <p id="errorMessage"></p>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-4">
            <p class="text-white/70 text-sm">
                提示：这是一个演示版本，实际应用中需要配置AI服务API密钥
            </p>
        </div>
    </div>

    <script>
        const promptInput = document.getElementById('promptInput');
        const generateBtn = document.getElementById('generateBtn');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const generatedImage = document.getElementById('generatedImage');
        const downloadBtn = document.getElementById('downloadBtn');
        const error = document.getElementById('error');
        const errorMessage = document.getElementById('errorMessage');

        generateBtn.addEventListener('click', async () => {
            const prompt = promptInput.value.trim();
            
            if (!prompt) {
                showError('请输入图片描述');
                return;
            }

            // 显示加载状态
            loading.classList.remove('hidden');
            result.classList.add('hidden');
            error.classList.add('hidden');
            generateBtn.disabled = true;

            try {
                const response = await fetch('/generate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ prompt })
                });

                const data = await response.json();

                if (data.success) {
                    generatedImage.src = data.image_data;
                    downloadBtn.onclick = () => {
                        const link = document.createElement('a');
                        link.href = data.image_data;
                        link.download = 'generated_image.png';
                        link.click();
                    };
                    result.classList.remove('hidden');
                } else {
                    showError(data.error || '生成图片失败');
                }
            } catch (err) {
                showError('网络错误，请稍后重试');
            } finally {
                loading.classList.add('hidden');
                generateBtn.disabled = false;
            }
        });

        function showError(message) {
            errorMessage.textContent = message;
            error.classList.remove('hidden');
        }

        // 回车键触发生成
        promptInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                generateBtn.click();
            }
        });
    </script>
</body>
</html>
